<script lang="ts" setup>
import { NButton, NIcon } from 'naive-ui'
import { MinusOutlined, PlusOutlined } from '@vicons/antd';

const props = defineProps(["zoomConfig"])
const emits = defineEmits(['update:zoomConfig'])
</script>
<template>
    <div class="zoom-config">
        <n-button class="zoom-config-minus" text @click="emits('update:zoomConfig', props.zoomConfig - 10)">
            <n-icon>
                <minus-outlined />
            </n-icon>
        </n-button>
        <div style="width: 60px;height: 40px;line-height: 40px;text-align: center;">{{ props.zoomConfig }}%</div>
        <n-button class="zoom-config-plus" text @click="emits('update:zoomConfig', props.zoomConfig + 10)">
            <n-icon>
                <plus-outlined />
            </n-icon>
        </n-button>
    </div>
</template>
<style scoped>
.zoom-config {
    position: absolute;
    top: 0px;
    right: 12px;
    display: flex;
    width: 138px;
    height: 38px;
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid rgb(230, 230, 230);
    z-index: 100;
}

.zoom-config .zoom-config-minus {
    width: 39px;
    height: 40px;
    font-size: 18px;
    border-right: 1px solid rgb(230, 230, 230);
}

.zoom-config .zoom-config-plus {
    width: 39px;
    height: 40px;
    font-size: 18px;
    border-left: 1px solid rgb(230, 230, 230);
}
</style>